<template>
	<view class="container">
		<u-sticky>
			<view style="background-color: #fff;">
				<Tabs :tab-list="orderStatusList" keyName="name"></Tabs>
			</view>
		</u-sticky>

		<view class="order-list">
			<view class="order-item" v-for="(item,index) in 5" @tap="toDetail">
				<view class="top-row flex-x-bet-y-center">
					<!-- <text>厂家名称</text> -->
					<view class="flex-y-center">
						<text style="color:#333333;margin-right: 30rpx;">张晓</text>
						<text>手机号：13546456465</text>
					</view>
					<text class="status-text">订单状态</text>
				</view>
				<view class="product-info">
					<image src="../../static/images/icon-msg.png" mode="" class="cover"></image>
					<view class="right-info">
						<view class="name">
							山推矿山利器 全新470挖
							掘机
						</view>
						<view class="price">
							￥120
						</view>
					</view>
				</view>
				<view class="total-price">总计￥150.00，物流￥88.00</view>
				<view class="bottom-row flex-x-bet-y-center">
					<view class="flex-y-center">
						<text>实付款：</text>
						<text class="price">￥63.00</text>
					</view>
					<view class="handle-btn">确认收货</view>
				</view>
			</view>
		</view>
		
		<u-loadmore status="loading" font-size="28" icon-size="30"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderStatusList: [{
						name: '全部',
						status: 0
					}, {
						name: '待付款',
						status: 0,
					}, {
						name: '待发货',
						status: 0
					}, {
						name: '待收货',
						status: 0
					}, {
						name: '退换货',
						status: 0
					},
					{
						name: '已完成',
						status: 0
					}
				]
			};
		},
		methods:{
			toDetail(){
				this.$myUni.navTo('/pages/order/order-detail')
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .tab-item {
		position: relative !important;
		padding: 30rpx 0 20rpx !important;
		font-weight: 500 !important;
		font-size: 29rpx !important;
		color: #333333 !important;

		.underline {
			position: absolute;
			top: 20rpx;
			left: 50%;
			top: 95%;
			transform: translateX(-50%);
		}
	}

	::v-deep .active {
		font-weight: bold !important;
		font-size: 29rpx !important;
		color: $theme-color !important;
	}

	.order-list {
		margin: 30rpx;


		.order-item {
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;

			.top-row {
				padding: 35rpx 30rpx;
				font-weight: 500;
				font-size: 29rpx;
				color: #666666;
			}

			.status-text {
				color: $theme-color;
			}

			.product-info {
				display: flex;
				padding: 30rpx 0;
				margin: 0 30rpx;
				border-top: 1rpx solid #F3F3F3;

				.cover {
					width: 260rpx;
					height: 180rpx;
					margin-right: 30rpx;
					flex-shrink: 0;
				}

				.right-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					min-height: 180rpx;
					padding: 10rpx 0;
					box-sizing: border-box;

					.name {
						font-weight: bold;
						font-size: 31rpx;
						color: #333333;
					}

					.price {
						font-weight: 800;
						font-size: 31rpx;
						color: #F42D1F;
					}
				}
			}

			.total-price {
				font-weight: 500;
				font-size: 27rpx;
				color: #333333;
				padding-bottom: 30rpx;
				margin: 0 30rpx;
				border-bottom: 1rpx solid #F3F3F3;
			}
			
			.bottom-row{
				font-weight: 500;
				font-size: 27rpx;
				color: #333333;
				padding: 20rpx 30rpx;
				
				.price{
					color: #F42D1F;
					font-size: 32rpx;
				}
				
				.handle-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 165rpx;
					height: 65rpx;
					background: linear-gradient(90deg, #FEA413, #FE5A13);
					border-radius: 33rpx;
					font-weight: 500;
					font-size: 29rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>